{include file="common/header"}
<div id="app" v-cloak>
    <div class="el-pane-warp">
        <el-form ref="ruleForm" :rules="rules" :model="config" label-width="150px">
            <el-form-item label="logo图片：" prop="logo">
                <el-file-select v-model="config.logo"></el-file-select>
            </el-form-item>
            <el-form-item label="二维码地址：" prop="url">
                <el-input v-model="config.url"></el-input>
            </el-form-item>
            <el-form-item label="二维码像素：" prop="size">
                <el-radio-group v-model="config.size">
                    <el-radio :label="200">200*200px</el-radio>
                    <el-radio :label="300">300*300px</el-radio>
                    <el-radio :label="400">400*400px</el-radio>
                    <el-radio :label="500">500*500px</el-radio>
                    <el-radio :label="1000">1000*1000px</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="二维码地址：" v-if="src !== ''">
                <img :src="src" width="200" height="200">
            </el-form-item>
        </el-form>
        <div class="el-bottom" style="width: 100%">
            <el-button 
                :loading="loading"
                type="primary" 
                size="medium" 
                icon="el-icon-refresh-right"
                @click="save()">
                点击生成并保存二维码
            </el-button>
        </div>
    </div>
</div>
<script>
new Vue({
    el: '#app',
    data() {
        return {
            config: {:json_encode($config)},
            loading: false,
            updateUrl: "qrcode/config/index",
            src: '',
            rules: {
                logo: [
                    { required: true, message: '请填写', trigger: 'blur' },
                ],
                url: [
                    { required: true, message: '请填写', trigger: 'blur' },
                ],
                size: [
                    { required: true, message: '请填写', trigger: 'blur' },
                ],
                level: [
                    { required: true, message: '请填写', trigger: 'blur' },
                ],
            },
        }
    },
    methods: {
        /**
         * 保存数据
         */
        save() {
            let self = this;
            self.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    self.loading = true;
                    request.post(self.updateUrl, {value: self.config}, function(res){
                        self.src     = res.data;
                        self.loading = false;
                        self.$notify({showClose: true, message: res.message, type: res.status});
                    });
                } else {
                    return false;
                }
            });
        },
    },
})
</script>
{include file="common/footer"}